<template>
  <div class="wrapper bg2 mb20" @click="onClick">
    <text :class="['title', 'mr6', isGrayText ? 'text2' : 'text3']">{{ title }}</text>
    <VSelDownUp v-if="isShowDp"/>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30px;
    border-color: #252a4d;
    border-radius: 4px;
    border-width: 1px;
    height: 80px;
  }
  .title {
    font-size: 30;
    line-height: 32px;
    flex: 1;
    lines: 1;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: normal;
    white-space: nowrap;
  }
</style>

<script>
  import VSelDownUp from "@/aide/view/VSelDownUp.vue";
  import jconfig from "@/_js/config";
  import jmath from "@/_js/math";
  import I18N from "@/_i18n/i18n";
  import jdebug from "@/_js/debug";
  var T = I18N.t;
  export default {
    components: {
      VSelDownUp,
    },
    props: {
      title: {
        type: String,
        default: "",
      },
      type: {
        type: String,
        default: "",
      },
      values: {
        type: Array,
        default: () => [],
      },
      isAll: {
        type: Boolean,
        default: false,
      },
      //title是否灰色
      isGrayText: {
        type: Boolean,
        default: true,
      },
      isShowDp: {
        type: Boolean,
        default: true,
      },
    },

    data() {
      return {
        Config: jconfig,
        T: T,
        isShow: false,
      };
    },

    created() {
      jconfig.init(() => {
        this.isShow = true;
      }, [jconfig.OPT_UP_DOWN]);
    },

    computed: {},

    mounted() {},
    methods: {
      onClick() {
        this.$emit("onConditionClick", {
          type: this.type,
          values: this.values || [],
          value: this.title || "",
        });
      },
    },
  };
</script>